import React, { FC, useEffect, useRef } from "react";
import * as echarts from "echarts";
import { EChartsOption, EChartsResponsiveOption } from "echarts";
import type { EquipDistType } from "@/types/echartInterface";
interface Iprops {
  equipDist: EquipDistType;
  lineStyle: {
    width: string;
    height: string;
  };
}
const SingleBarChart: FC<Iprops> = (props: Iprops) => {
  const chartRef = useRef<HTMLDivElement | null>(null);
  const { equipDist, lineStyle } = props;
  const { xData = [], seriesData = [] } = equipDist || {};

  useEffect(() => {
    // Initialize the chart
    const chartInstance = echarts.init(chartRef.current!);
    let options: EChartsOption = {};
    options = {
      title: {
        text: "边设备框架版本统计分布",
        left: "center",
        top: 5,
      },
      grid: {
        containLabel: true,
        top: 60, // Adjusted to accommodate the title
        right: 15,
        bottom: 0,
        left: 15,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        formatter: (params: any) => {
          const { name, data } = params[0];
          return `
                 <span style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #1F7D8D;margin-bottom:12px;">${name}</span>
                 <span style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #1F7D8D;margin-bottom:4px;">：${data} 个</span>
              `;
        },
        extraCssText:
          "opacity: 0.8;background-color:1F7D8D;padding:16px;box-shadow: 1px 6px 15px 1px #1F7D8D;border-radius: 4px;filter: blur(undefinedpx);border:none;",
      },

      xAxis: {
        // 类目轴
        type: "category",
        data: xData,
        axisTick: {
          show: false, //隐藏X轴刻度
        },
        axisLine: {
          lineStyle: {
            color: "#CCCCCC",
          },
        },
        axisLabel: {
          show: true,
          color: "#000",
          fontSize: 14,
          fontFamily: "Source Han Sans CN-Regular",
        },
      },
      yAxis: {
        type: "value",
        name: "(台)",
        nameTextStyle: {
          color: "000000",
          fontSize: 14,
          fontFamily: "PingFangSC, PingFang SC;",
          align: "left",
          verticalAlign: "middle",
        },
        axisLabel: {
          color: "rgba(0,0,0,0.65)",
          fontSize: 14,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "rgba(223, 223, 223, 1)",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(223, 223, 223, 1)",
            type: "dashed",
          },
        },
      },
      series: [
        {
          type: "bar",
          barWidth: 50,
          showBackground: true,
          backgroundStyle: {
            color: "transparent",
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#1F7D8D " },
              { offset: 1, color: "#3CF6F3 " },
            ]),
          },
          data: seriesData,
          label: {
            show: true,
            position: "top",
            color: "#000",
            fontSize: 14,
            fontFamily: "Source Han Sans CN-Regular",
          },
        },
      ],
      graphic: {
        type: "text",
        left: "center",
        top: "middle",
        silent: true,
        invisible: xData.length != 0,
        style: {
          fill: "#ccc",
          fontWeight: "bold",
          text: "暂无数据",
          fontSize: "15px",
        },
      },
    };

    // Use the specified options
    chartInstance.setOption(options as EChartsResponsiveOption);
    const resizeChart = () => {
      chartInstance.resize();
    };
    window.addEventListener("resize", resizeChart);
    // Cleanup chart instance on component unmount
    return () => {
      window.removeEventListener("resize", resizeChart);
      chartInstance.dispose();
    };
  }, [xData, seriesData]);

  return <div ref={chartRef} style={lineStyle} />;
};

export default SingleBarChart;
